<template>
  <div class="app-container">
    <div class="liucheng">
      <div class="search">
        <el-input
          width="80%"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-button size="small" type="success" @click="addClassify">新增一级分类</el-button>
      </div>
      <el-tree
        :data="threeData"
        node-key="id"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
        v-loading="loading"
        :props="defaultProps"
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => look(data)">
              查看
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
              添加
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => write(data)">
              修改
            </el-button>
            <!-- <el-popover
              placement="top"
              width="160"
              v-model="visible"
              :tabindex="node"
              >
              <p>您确定要删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="() => remove(node, data)">确定</el-button>
              </div>
              <el-button type="text" size="mini" slot="reference">删除</el-button>
            </el-popover> -->
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {liuchengtu,deleteliuchengtu} from '@/api/bumen'
export default {
  name: 'Liuchengtu',
  data(){
    return{
      filterText: '',
      threeData: [],
      loading: true,
      defaultProps:{
        children: 'lists',
        label: 'name'
      },
      isNeedRefresh: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  // beforeRouteEnter(to,from,next){
  //   console.log('from',from)
  //   if(from.name && from.name === "Lookliucheng"){
  //     to.meta.isNeedRefresh = false
  //   }else{
  //     to.meta.isNeedRefresh = true
  //   }
  //   next()
  // },
  mounted(){
    // this.isNeedRefresh = true
    this.getlist()
    // this.addTags()
  },
  activated(){
    console.log('路由重加载')
    console.log('route',this.$route)
  },
  deactivated(){
    console.log('组件销毁')
  },
  methods: {
    getlist(){
      liuchengtu({}).then(res => {
        console.log(res)
        this.threeData = res.data
        this.loading = false
      })
    },
    // 增加keep-alive缓存
    addTags() {
      const { name } = this.$route
      if (name) { 
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 新增一级分类
    addClassify(){
      this.$router.push({
        name: 'Writeliucheng',
        params: {
          options: 0
        }
      })
      localStorage.removeItem('lct')
    },
    append(data){
      console.log(data)
      this.$router.push({
        name: 'Writeliucheng',
        params: {
          options: data.id
        }
      })
      localStorage.removeItem('lct')
    },
    look(data){
      this.$router.push({
        name: 'Lookliucheng',
        params: {
          options: JSON.stringify(data)
        }
      })
    },
    write(data){
      this.$router.push({
        name: 'Writeliucheng',
        params: {
          options: JSON.stringify(data),
          isWrite: true
        }
      })
      localStorage.setItem('lct',JSON.stringify(data))
    },
    remove(node,data){
      console.log(data)
      this.$confirm('您确定要删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteliuchengtu(data.id).then(res => {
          console.log(res)
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getlist()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
}
</script>

<style scoped lang="scss">
.search{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /deep/.el-input{
    width: 85%;
  }
}
  .app-container{
    padding: 20px;
  }
  .liucheng{
    padding: 20px;
    background: #fff;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>